<!--
@funciton: 登录对话框
-->
<template>
<el-form :model="formModel" :rules="rules" class="login-container"
          label-position="left" label-width="0px" v-loading="loading" ref="loginForm">
  <h3 class="title">{{loginTitle}}</h3>
  <el-form-item prop="username">
    <el-input type="text" v-model="formModel.username" placeholder="请输入用户名"></el-input>
  </el-form-item>
  <el-form-item prop="password">
    <el-input type="password" v-model="formModel.password" placeholder="请输入密码"></el-input>
  </el-form-item>
  <el-checkbox class="remember" v-model="rememberPassword" label-position="left">记住密码</el-checkbox>
  <el-form-item style="width: 100%">
    <el-button type="primary" @click.native.prevent="submitClick('loginForm')" style="width: 100%">登录</el-button>
  </el-form-item>
</el-form>
</template>
<script>
import {Message} from 'element-ui'
import Config from '@/config'

export default {
  props: {
    loginTitle: {
      type: String,
      default: Config.appName
    }
  },
  data() {
    return {
      formModel: {
        username: 'admin',
        password: '123456'
      },
      rules: {
        username: [{
          required: true,
          message: '请输入用户名',
          trigger: 'blur'
        }],
        password: [{
          required: true,
          message: '请输入密码',
          trigger: 'blur'
        }]
      },
      loading: false,
      rememberPassword: true
    }
  },
  methods: {
    submitClick: function(formName) {
      var me = this;// 这里是这个模块
      me.loading = true;
      me.$refs[formName].validate((valid) => {
              if (valid) {
                // TODO 在静态数据测试中，需要使用GET，连接后台需要使用POST
                // /authentication/form /static/data/testSuc.json /authentication/form loginPostRequest getRequest
                me.getRequest('/static/data/testSuc.json', {
                  username: me.formModel.username,
                  password: me.formModel.password
                }).then(resp => {
                  me.loading = false;
                  if (resp && resp.status == 200) {
                    var loginInfo = {
                      user:{
                        name:resp.data.xm,
                        username:resp.data.username,
                        roles:resp.data.sysJsxxbs,
                        sslx:resp.data.sslx,
                        sslxbh:resp.data.sslxbh
                      }
                    }
                    me.$store.commit("login", loginInfo);
                    var path = me.$route.query.redirect;
                    me.$router.replace({
                      path: path == "/" || path == undefined ? "/Role" : path
                    });
                  }
                });

              } else {
                Message.warning({message:"请确认用户名和密码输入正确！"});
                me.loading = false;
                return false;
              }
            });

    }
  }
}
</script>
<style lang="scss">

.login-container {
  border-radius: 15px;
  background-clip: padding-box;
  margin: 180px auto;
  width: 350px;
  padding: 35px 35px 15px 35px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;

  .title {
    margin: 0px auto 40px auto;
    text-align: center;
    color: #505458;
  }

  .remember {
    margin: 0px 0px 35px 0px;
    text-align: left;
  }
}

</style>
